/* stylelint-disable docusaurus/copyright-header */

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.hero {
  box-shadow: var(--ifm-navbar-shadow);
}

.heroLogoWrapper {
  position: relative;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 256px;
  height: 256px;
  margin-bottom: 1.5rem;
  background: #fff;
  border-radius: 48px;
  transform: translateX(-50%);
}

.heroLogo {
  width: 80%;
  height: 80%;
}

.heroTitle {
  padding-left: 1.5rem;
}

.install {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0;
  box-shadow: var(--ifm-navbar-shadow);
}

.installTextWrapper {
  width: 60%;
}

@media screen and (max-width: 768px) {
  .installTextWrapper {
    width: 90%;
  }
}

.main {
  margin-top: 4.5rem;
}

.feature {
  margin-bottom: 4.5rem;
}

@media screen and (max-width: 768px) {
  .feature {
    margin-bottom: 1.5rem;
  }
}

.featureReverse {
  flex-direction: row-reverse;
}

.featureImage {
  height: 256px;
}

@media screen and (max-width: 768px) {
  .featureImage {
    margin-bottom: 1.5rem;
  }
}

.featureDesc {
  display: flex !important;
  align-items: center;
}

.cncfLogo {
  height: 128px;
}

@media screen and (max-width: 768px) {
  .cncfLogo {
    height: 64px;
  }
}
